<template>
	<view class="vip-master-view">
		<view class="start"></view>
		<view class="clip-me"></view>
		<view class="vip-component">
			<view class="top-nav" @click="goback">
				<van-icon name="arrow-left" color="#081A2A" size="18" class="nav-back-icon" />
				<view class="title">我的VIP奖池</view>
			</view>
			<view class="main">
				<view class="slogan">
					<view class="s-o">ORAW</view>
					<view class="s-vip">VIP GUIOE</view>
				</view>
				<view class="reward-img"></view>
				<view class="reward-time">
					<view class="time">
						{{ myVipRewardData?.createdDate ? timeFormatHelp.formatTime(myVipRewardData?.createdDate) : '' }}
						- 至今</view>
					<view class="reward-time-content">
						<view class="day-num">
							<view class="day-layout-flex">
								<view class="d-title">剩余VIP天数(天)</view>
								<view class="num">{{ myVipRewardData?.remainDay }}</view>
							</view>
							<view class="day-layout-flex">
								<view class="d-title">获取VIP总天数(天)</view>
								<view class="num">{{ myVipRewardData?.rewardTotalDay}}</view>
							</view>
						</view>
						<view class="sum">
							<view class="sum-item">
								<view class="sum-item-title">今日获得VIP天数</view>
								<view class="sum-item-num">{{ myVipRewardData?.todayRewardDay }}</view>
							</view>
							<view class="sum-item">
								<view class="sum-item-title"> 已兑换给孩子VIP天数 </view>
								<view class="sum-item-num">{{ myVipRewardData?.exchangeDay }}</view>
							</view>
							<view class="sum-item">
								<view class="sum-item-title">抽奖获得VIP天数</view>
								<view class="sum-item-num">{{ myVipRewardData?.lotteryDrawDay }}</view>
							</view>
						</view>
						<view class="flooter" @click="goRechargePage">
							<image src="/static/images/vip/vipNum.png" class="img"></image>
							<view class="txt">给孩子兑换VIP天数</view>
						</view>
					</view>
				</view>

				<view class="raffle">
					<view class="title">
						<image src="/static/images/vip/jfcj.jpg" class="img"></image>
						<view class="integral">
							当前积分： <view class="integral-num">{{myVipRewardData.rewardPoints }}</view>
						</view>
					</view>
					<view class="btn go-raffle" @click="jumpPage">去抽奖</view>
				</view>

				<view class="rules">
					<RewardDetails title="奖励明细" :data="rewardDetailsData" />
					<view class="more-action">
						<view class="more-tips">最多展示一个月内20条记录</view>
						<view class="action" @click="loadMoreData" v-if="showMoreAction">更多记录</view>
					</view>
				</view>
			</view>
		</view>
		<GlobalWebsocketNotice />
		<Can v-if="isCan" :visible="isCan" :count="myVipRewardData.rewardPoints" @jump="toRewards" @close="onCloseCan" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue'
	import { vipServer } from "@/common/index";
	import RewardDetails from "@/components/rewardDetails/index.vue"
	import { useBound } from "@/hooks/useBound.ts"
	import GlobalWebsocketNotice from '@/components/globalWebsocketNotice/index.vue'
	import Can from '@/components/pointsLotteryModal/can.vue'
	import { useVipStore } from "@/stores/useVip.js"
	import { onShow } from "@dcloudio/uni-app"
	import { timeFormatHelp } from "@/utils/index"
	// import {  setupWebSocket, receivedMessages } from '@/utils/socket.js';
	// import {useWebSocket } from '@/hooks/useSocket'
	// const { onSocketMessage  } = useWebSocket()
	const vipStore = useVipStore();
	const { tipBoundStudent, studentIsEmpt } = useBound();


	const isCan = ref(false);
	const toRewards = () => {
		uni.navigateTo({
			url: "/pagesD/raffle/index"
		})
	}
	const onCloseCan = () => {
		isCan.value = false
	}


	// console.log("这是监听的消息12313212", vipStore.getTestData(), receivedMessages.value)

	// 我的奖池
	const myVipRewardData = ref({});
	// 获取奖品列表
	const myVipReward = async () => {
		try {
			const { data, status } = await vipServer.myVipReward()
			if (status === '200') {
				myVipRewardData.value = data
				vipStore.setMyVipReward(data)
				if(Number(data.rewardPoints) >= 10){
					isCan.value = true
				}
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}
	const MAX = 4
	const allMyRewardDetailsData = ref([])
	const showMoreAction = computed(() => {
		return rewardDetailsData.value.length <= MAX && allMyRewardDetailsData.value.length > rewardDetailsData.value.length
	})
	const loadMoreData = () => {
		if (rewardDetailsData.value.length <= MAX) {
			rewardDetailsData.value = allMyRewardDetailsData.value
		}
	}

	// 奖励明细
	const rewardDetailsData = ref([]);
	// 获取奖品列表
	const rewardDetails = async () => {
		try {
			const { data, status } = await vipServer.rewardDetails()
			if (status === "200") {
				if (Array.isArray(data)) {
					// 	rewardType :奖励类型 1:注册 2:绑定 3: 充值一个月 4: 充值六个月 5: 充值一年 6:抽奖
					const rewardTypeDic = [
						{
							rewardType: 0,
							label: '首次分享'
						},
						{
							rewardType: 1,
							label: '注册'
						},
						{
							rewardType: 2,
							label: '绑定'
						},
						{
							rewardType: 3,
							label: '充值一个月'
						},
						{
							rewardType: 4,
							label: '充值六个月'
						},
						{
							rewardType: 5,
							label: '充值一年'
						},
						{
							rewardType: 6,
							label: '下线异常'
						}
					]
					data.forEach(item => {
						const { rewardType, label } = rewardTypeDic.find(d => d.rewardType === item.rewardType) || {}
						if (typeof rewardType === 'number' && label) {
							item.rewardType = label
						}
					})
					if (data.length > MAX) {
						allMyRewardDetailsData.value = data;
						const restrictedData = [];
						for (let i = 0; i < data.length; i++) {
							if (i < MAX) {
								restrictedData.push(data[i])
							} else {
								break
							}
						}
						rewardDetailsData.value = restrictedData
					} else {
						allMyRewardDetailsData.value = data;
						rewardDetailsData.value = data
					}
				} else {
					allMyRewardDetailsData.value = [];
					rewardDetailsData.value = []
				}
			}

		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}

	onShow(() => {
		myVipReward()
		rewardDetails()
	})

	onMounted(() => {
		// myVipReward()
		// rewardDetails()
	})

	const goback = () => {
		uni.switchTab({
			url: "/pages/tabbar/vip/index"
		})
	}
	const jumpPage = () => {
		// if(studentIsEmpt.value){
		// 	tipBoundStudent();
		// 	return;
		// }
		uni.navigateTo({
			url: "/pagesD/raffle/index"
		})
	}
	const goRechargePage = () => {
		if (studentIsEmpt.value) {
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url: "/pagesD/rewards/index"
		})
	}
</script>
<style>
	page {
		background-color: #eff8fd;
	}
</style>
<style lang="scss" scoped>
	.top-nav {
		width: 100%;
		height: 60upx;
		padding-top: 100upx;
		text-align: center;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		line-height: 60upx;

		// background-color: #ccc;
		.nav-back-icon {
			position: absolute;
			left: 20upx;
			z-index: 2;
		}

		.title {
			color: #081A2A;
			font-weight: 600;
			font-size: 36upx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>
<style lang="scss">
	.vip-master-view {
		background-size: cover;
		background-position: center;
		min-width: 100vw;
		min-height: 100vh;
		position: relative;

		// display: flex;
		// justify-content: center;
		// align-items: center;
		.start {
			position: absolute;
			z-index: 1;
			top: 120upx;
			right: 0;
			transform: rotate(150deg);
			left: -36px;
			width: 78px;
			height: 103px;
			background-image: url('/static/images/vip/blur_start.png');
		}

		.clip-me {
			width: 600upx;
			height: 600upx;
			right: 0;
			top: 0;
			background-color: #e9fbfc;
			backdrop-filter: blur(5upx);
			box-shadow: 2upx 5upx 5upx rgba(179, 241, 215, 0.1);
			z-index: -1;
			position: absolute;
			/* absolute or fixed positioning required */
			// clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
			clip-path: polygon(16% 38%, 10% 23%, 35% 6%, 70% 2%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 0 100%, 21% 68%, 25% 51%);
		}



	}
</style>
<style lang="scss">
	.vip-component {
		position: absolute;
		background-color: red;
		min-width: 100vw;
		min-height: 100vh;
		background: rgba(255, 255, 255, 0.3);
		/* 半透明的白色背景 */
		// border-radius: 15px;
		// padding: 20px;
		text-align: center;
		backdrop-filter: blur(10px);
		/* 应用模糊效果 */
		-webkit-backdrop-filter: blur(10px);
		/* 兼容 Webkit 内核的浏览器 */
		// box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

		.main {
			position: absolute;
			top: calc(160upx + 100upx);
			padding: 0 20upx;
			width: calc(100% - 40upx);

			.reward-img {
				position: absolute;
				z-index: 3;
				width: 126px;
				height: 119px;
				top: -60upx;
				right: 0;
				background: url("/static/images/vip/reward.png");
			}

			.slogan {
				position: absolute;
				z-index: 2;
				top: -60upx;
				right: 0;
				color: #e9fbfc;
				font-size: 60upx;
				display: flex;
				flex-direction: column;
				color: transparent;
				/* 文字本身透明 */
				// -webkit-text-stroke: 2px #fff;

				/* 黑色描边，描边宽度为2px */
				.s-o {}

				.s-vip {}
			}

		}

	}
</style>


<style scoped lang="scss">
	.reward-time {
		position: relative;
		z-index: 4;

		.time {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300upx;
			height: 72upx;
			font-weight: 600;
			font-size: 28upx;
			color: #081A2A;
			line-height: 40upx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			background-color: rgba(255, 255, 255, .8);
			backdrop-filter: blur(10px);
			/* 应用模糊效果 */
		}

		.reward-time-content {
			background-color: rgba(255, 255, 255, .8);
			backdrop-filter: blur(10px);
			/* 应用模糊效果 */
			border-bottom-left-radius: 30upx;
			border-bottom-right-radius: 30upx;
			padding-bottom: 16upx;

			.day-num {
				display: flex;
				justify-content: flex-start;
				padding: 30upx 34upx;
				border-bottom: 1px solid #F5F6F6;

				.day-layout-flex {
					flex-grow: 1;
					flex-basis: 0;
					display: flex;
					flex-direction: column;

					.d-title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #999999;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.num {
						font-family: DIN Pro, DIN Pro;
						font-weight: bold;
						font-size: 32upx;
						color: #081A2A;
						line-height: 60upx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.sum {
				padding: 30upx 34upx;

				.sum-item {
					display: flex;
					justify-content: space-between;
					align-content: center;
					margin-bottom: 18upx;

					.sum-item-title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28upx;
						color: #081A2A;
						line-height: 46upx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.sum-item-num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 38upx;
						font-weight: bold;
						color: #2BC888;
						line-height: 46upx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}

			}

			.flooter {
				width: 670upx;
				height: 108upx;
				background: #2BC888;
				border-radius: 54upx;
				display: flex;
				justify-content: center;
				align-content: center;
				margin-bottom: 30upx;
				margin-top: 30upx;
				line-height: 108upx;

				.img {
					width: 32px;
					height: 32px;
					margin-top: 23upx;
				}

				.txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32upx;
					color: #FFFFFF;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}

	}


	.raffle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 12upx;
		height: 140upx;
		margin: 20upx auto;

		.title {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-content: flex-start;
			margin-left: 60upx;

			.img {
				width: 63px;
				height: 15px;
			}

			.integral {
				margin-top: 20upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30upx;
				color: #141414;
				line-height: 28upx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.integral-num {
					color: #FF6363;
					font-weight: bold;
				}
			}
		}

		.go-raffle {
			margin-right: 28upx;
			width: 146upx;
			height: 62upx;
			line-height: 62upx;
			background: #F04542;
			border-radius: 31upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28upx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.rules {
		background: #FFFFFF;
		padding: 10upx;
		border-radius: 12upx;
		width: 100%;

		.more-action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			margin: 24upx auto;

			.more-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #999999;
				line-height: 28upx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.action {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28upx;
				color: #2BC888;
				line-height: 32px;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>